<template>
    <div>
        <el-form-item label="提示文字">
            <el-input size="small" v-model="value.placeholder" placeholder="请设置提示语" />
        </el-form-item>
        <el-form-item label="选项模式">
            <el-radio-group v-model="value.optionMode">
                <el-radio label="fixed">固定选项</el-radio>
                <el-radio label="loading">远程加载</el-radio>
            </el-radio-group>
        </el-form-item>
        <div v-if="value.optionMode === 'fixed'">
            <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px">
                选项设置
                <el-button type="text" size="mini" icon="el-icon-plus"
                    @click="value.options.push({ value: '1', label: '新选项' })">新增选项</el-button>
            </div>
            <div v-for="(item, index) in value.options" :key="index"
                style="align-items: center; display: flex; margin-bottom: 10px;">
                <el-input size="mini" v-model="value.options[index].value" placeholder="请设置值" />
                ~
                <el-input size="mini" v-model="value.options[index].label" placeholder="请设置显示选项名">
                    <el-button type="danger" slot="append" size="medium" icon="el-icon-delete"
                        @click="value.options.splice(index, 1)"></el-button>
                </el-input>

            </div>
        </div>
        <el-form-item label="配置数据源" v-else>
            <el-button icon="el-icon-link" size="mini" @click="() => { dialogVis = true; }">编辑http数据源</el-button>
        </el-form-item>

        <el-form-item label="选项展开">
            <el-switch v-model="value.expanding" :disabled="value.multiple"></el-switch>
        </el-form-item>
        <el-form-item label="多选模式">
            <el-switch v-model="value.multiple" @change="value.multiple ? value.expanding = false : ''"></el-switch>
        </el-form-item>
        <el-dialog width="700px" title="编辑配置http数据源请求" :visible.sync="dialogVis">
            <el-form ref="form" :model="form" label-width="80px" size="mini">
                <el-input placeholder="请输入URL地址" v-model="form.url" size="mini">
                    <template slot="prepend">
                        <el-select size="mini" v-model="form.method" placeholder="方法" style="width:100px">
                            <el-option label="GET" value="GET"></el-option>
                            <el-option label="POST" value="POST"></el-option>
                            <el-option label="PUT" value="PUT"></el-option>
                            <el-option label="DELETE" value="DELETE"></el-option>
                        </el-select>
                    </template>
                </el-input>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="header头" name="first">
                        <el-button :style="{ visibility: form.headers.length > 0 ? 'hidden' : 'visible' }" type="text"
                            size="mini" icon="el-icon-plus"
                            @click="form.headers.push({ headerName: '', headerValue: '' })">添加header请求头</el-button>
                        <div v-for="(item, index) in form.headers" :key="index"
                            style="align-items: center; display: flex; margin-bottom: 10px;">
                            <el-input size="mini" v-model="form.headers[index].headerName" placeholder="header名" />
                            ~
                            <el-input size="mini" v-model="form.headers[index].headerValue" placeholder="header值">
                                <el-button type="danger" slot="append" size="medium" style="width: 50px;"
                                    icon="el-icon-delete" @click="form.headers.splice(index, 1)"></el-button>
                                <el-button type="text" slot="append" size="medium"
                                    :class="[index == form.headers.length - 1 ? 'el-button-show' : 'el-button-hidden']"
                                    icon="el-icon-plus"
                                    @click="form.headers.push({ headerName: '', headerValue: '' })"></el-button>
                            </el-input>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="body参数" name="second">
                        <el-form-item label="参数类型:">
                            <el-radio-group v-model="form.body.mode">
                                <el-radio label="form">x-www-form</el-radio>
                                <el-radio label="json">application/json</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div v-if="form.body.mode == 'form'">
                            <el-button type="text" size="mini" icon="el-icon-plus"
                                @click="() => form.body.formData.push({ key: '', value: '' })">添加表单参数</el-button>
                            <div style="align-items: center; display: flex; margin-bottom: 10px;"
                                v-for="(item, index) in form.body.formData" :key="index">
                                <el-input size="mini" v-model="form.body.formData[index].key" placeholder="参数key" />
                                ~
                                <el-input size="mini" v-model="form.body.formData[index].value" placeholder="参数值">
                                    <el-button type="danger" slot="append" size="medium" style="width: 50px;"
                                        icon="el-icon-delete" @click="form.body.formData.splice(index, 1)"></el-button>
                                    <el-button type="text" slot="append" size="medium" icon="el-icon-plus"
                                        @click="form.body.formData.push({ key: '', value: '' })"
                                        :class="[form.body.formData.length - 1 == index ? 'el-button-show' : 'el-button-hidden']"></el-button>
                                </el-input>
                            </div>
                        </div>
                        <div v-else-if="form.body.mode == 'json'">
                            <code-editor v-model="form.body.jsonData" selectLang="json" :themDisabled="true"
                                :langDisabled="true"></code-editor>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="前置处理" name="third">
                        <code-editor v-model="form.preHandler" selectLang="javascript" :themDisabled="true"
                            :langDisabled="true"></code-editor>
                    </el-tab-pane>
                    <el-tab-pane label="后置处理" name="fourth">
                        <code-editor v-model="form.aftHandler" selectLang="javascript" :themDisabled="true"
                            :langDisabled="true"></code-editor>
                    </el-tab-pane>
                </el-tabs>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm" size="mini">重 置</el-button>
                <el-button @click="cancel" type="primary" size="mini">确 定</el-button>
            </span>

        </el-dialog>
    </div>
</template>

<script>
import CodeEditor from '../../../../components/common/CodeEditor.vue';
import { deepClone } from '../../../../utils/myUtil';

export default {
    name: "AdvancedPickerConfig",
    components: { CodeEditor },
    props: {
        //value为定义组件的数据结构里面的 props 对象
        value: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            dialogVis: false,
            activeName: 'first',
        }
    },

    computed: {
        form() {
            return this.value.loadingData || {};
        }
    },
    methods: {
       
        resetForm() {
            let newdata = deepClone(this.value);
            var loadingData={//动态远程加载数据
            url: '',//远程请求地址
            method: 'GET',//请求方式
            headers:[],//请求头列表,格式为{headerName,headerValue}
            body:{
              mode: '',//请求体格式，form(x-www-form)表单，json(application/json)格式
              jsonData:'//请输入json格式请求体(该段需要删除，不能存在类似的注解)',//json格式请求体
              formData:[]//form表单请求体,格式为{key,value}
            },//请求体
            preHandler: 'function preHandler(ctx,token)\n{'+'\n//发起请求前做一些处理'+'\n}',//请求前处理函数
            aftHandler: 'function aftHandler(rsp)\n{'+'\n//获取到结果后做一些处理'+'\n}',//请求后处理函数
          }
            newdata.loadingData = loadingData;
            this.$emit('input', newdata);
        },
        cancel() {
            this.dialogVis = false

        },
       


    }
}
</script>

<style scoped>
.el-button-show {
    width: 50px;
    visibility: visible;
}

.el-button-hidden {
    width: 50px;
    visibility: hidden
}
</style>